import { useState } from 'react';
import { getData2 } from '../Data'
import { useMount, useReactive } from 'ahooks';
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid';

const WijmoF05 = () => {

    const InitData = useReactive({
        init: null,
    })

    const [Data, setData] = useState()
    useMount(() => { setData(getData2(100)) })

    const init = (init) => {
        InitData.init = init
        init.formatItem.addHandler((s, e) => { if (e.panel == s.rowHeaders && e.col == 0) e.cell.innerHTML = '<span class="wj-glyph-pencil" />' })
        init.addEventListener(init.hostElement, 'click', (e) => {
            let ht = init.hitTest(e)
            if (ht.panel === init.rowHeaders) {
                let editItem = init.rows[ht.row].dataItem
                console.log('修改数据', editItem)
            }
        })
    }



    if (Data) {
        return (
            <div className="Page">
                <FlexGrid isReadOnly={true} selectionMode="Row" initialized={init} itemsSource={Data}>
                    <FlexGridColumn binding="id" header="ID" width={50} isReadOnly={true} />
                    <FlexGridColumn binding="country" header="Country" isRequired={true} dataMap="countries" />
                    <FlexGridColumn binding="sales" header="Sales" format="n2" />
                    <FlexGridColumn binding="expenses" header="Expenses" format="n2" />
                    <FlexGridColumn binding="num01" header="No.1" format="n2" />
                    <FlexGridColumn binding="num02" header="No.2" format="n2" />
                    <FlexGridColumn binding="num03" header="No.3" format="n2" />
                    <FlexGridColumn binding="num04" header="No.4" format="n2" />
                    <FlexGridColumn binding="num05" header="No.5" format="n2" />
                    <FlexGridColumn binding="num06" header="No.6" format="n2" />
                    <FlexGridColumn binding="num07" header="No.7" format="n2" />
                    <FlexGridColumn binding="num08" header="No.8" format="n2" />
                </FlexGrid>
            </div>
        )
    }

};

export default WijmoF05;